import React, { useEffect } from "react";
import { modalPropsType } from "@/constants/types";
import { Modal, Form, Input } from "antd";
import { fetchFunctionDetail } from "../../services";
import { isEmptyObj } from "@/utils/util";

const {Item} = Form;
const rules = [{required: true, message: '此项必填'}];
const labelCol = {span: 7};

const MenuBtnUpdateModal = ({visible, onCancel, onSubmit, currentRow, loading, title}: modalPropsType) => {
  const [form] = Form.useForm();

  const fetchFunctionDetailApi = async (id: string) => {
    const res = await fetchFunctionDetail({id});
    if (!isEmptyObj(res)) {
      form.setFieldsValue(res);
    }
  }

  const handleSubmit = async () => {
    const res = await form.validateFields();
    onSubmit({
      ...res,
      id: currentRow?.id
    });
  }

  useEffect(() => {
    if (currentRow?.id) {
      fetchFunctionDetailApi(currentRow?.id);
    } else {
      form.resetFields();
    }
  }, [currentRow?.id])

  return (
    <Modal
      title={title}
      open={visible}
      onCancel={onCancel}
      onOk={handleSubmit}
      width="500px"
      confirmLoading={loading}
    >
      <Form form={form} labelCol={labelCol}>
        <Item name="name" label="按钮中文名称" rules={rules}>
          <Input />
        </Item>
        <Item name="code" label="Code" rules={rules}>
          <Input />
        </Item>
      </Form>
    </Modal>
  );
}
export default MenuBtnUpdateModal;